<template>
  <!-- 产品列表 -->
  <div>
    <van-dropdown-menu>
      <van-dropdown-item v-model="value1" :options="option1" title="综合" disabled/>
      <van-dropdown-item v-model="value1" :options="option1" title="价格" @change="DropdownOrder"/>
      <van-dropdown-item v-model="value2" :options="filterCategory" title="分类" @change="DropdownFilter"/>
    </van-dropdown-menu>
    
    <ul>
        <li v-for="item in datas" :key="item.id" @click="GoProductFn(item.id)">
            <img v-lazy="item.list_pic_url" alt="">
            <p class="goodsListop1">{{item.name}}</p>
            <p class="goodsListp2">{{item.retail_price|filterPrice}}</p>
        </li>
    </ul>
  </div>
</template>

<script>
export default {
    props:["datas","filterCategory"],
  data() {
    return {
      value1: "",
      value2: 0,
      option1: [
        { text: "价格由高到底", value: "desc" },
        { text: "价格由低到高", value: "asc" },
      ],
    //   option2: [
    //     { text: "全部", value: "a" },
    //     { text: "好评排序", value: "b" },
    //   ],
    };
  },
  methods:{
      DropdownOrder(e){
          this.$emit("fn",e)
      },
      DropdownFilter(e){
          this.$emit("fn1",e)
      },
      GoProductFn(id){

        this.$router.push({
          path: `/product/${id}`,
        })
      }
      
  }
};
</script>
 
<style lang = "less" scoped>
ul{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    background-color: #fff;
    padding: .1rem;
    padding-top:  .5rem;
    text-align: center;
    /* 1. 文字显示不开，是否开启换行   nowrap：不换行*/
    white-space: nowrap;
    /* 2. 超出的隐藏 */
    overflow: hidden;
    /* 3. 文字溢出的时候，用省略号显示 */
    text-overflow: ellipsis;
}
li{
    width: 49%;
}
img{
    width: 100%;
}
.goodsListop1{
 text-align: center;
    /* 1. 文字显示不开，是否开启换行   nowrap：不换行*/
    white-space: nowrap;
    /* 2. 超出的隐藏 */
    overflow: hidden;
    /* 3. 文字溢出的时候，用省略号显示 */
    text-overflow: ellipsis;
}
.goodsListp2{
    color: #8B0000;
    margin-top: .05rem;
}
</style>